<!doctype html>
<html lang="en">
<head>
    <link rel="icon" href="static/logo.png"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Helm Dashboard</title>
    <script src="static/analytics.js"></script>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Roboto&family=Inter&family=Poppins:wght@600&family=Poppins:wght@500&family=Inter:wght@500&family=Roboto+Slab:wght@400&family=Roboto+Slab:wght@700&family=Roboto:wght@700&family=Roboto:wght@500"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/lightfair.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"/>
    <link href="static/styles-base.css" rel="stylesheet">
    <link href="static/styles.css" rel="stylesheet">
</head>
<body>

<div class="container-fluid px-0">
    <!-- TOP BAR -->
    <nav class="navbar navbar-expand bg-white mb-0 p-0 b-shadow" id="topNav">
        <div class="container-fluid m-0 p-0">
            <div class="navbar-brand me-0">
                <a href="/"><img src="static/logo-header.svg" alt="Helm Dashboard"></a>
            </div>

            <div class="separator-vertical mx-3"><span></span></div>

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item mx-2">
                    <a class="nav-link px-3 section-installed">Installed</a>
                </li>
                <li class="nav-item mx-2">
                    <a class="nav-link px-3 section-repo">Repository</a>
                </li>
                <li class="nav-item mx-2 dropdown">
                    <a class="nav-link dropdown-toggle section-help" role="button" data-bs-toggle="dropdown"
                       aria-expanded="false">
                        Help
                    </a>
                    <ul class="dropdown-menu fs-80">
                        <li><a class="dropdown-item"
                               href="https://join.slack.com/t/komodorkommunity/shared_invite/zt-1dm3cnkue-ov1Yh~_95teA35QNx5yuMg"
                               target="_blank"><i class="bi-slack"></i> Support Chat</a></li>
                        <li><a class="dropdown-item" href="https://github.com/komodorio/helm-dashboard" target="_blank"><i
                                class="bi-github"></i> Project Page</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item disabled" href="#">Version <span id="toolVersion"></span></a></li>
                    </ul>
                </li>
                <li class="nav-item mx-2 display-none upgrade-possible">
                    <a class="nav-link position-relative text-danger"
                       href="https://github.com/komodorio/helm-dashboard#installing" target="_blank">
                        Upgrade to <span id="toolVersionUpgrade"></span>
                    </a></li>

            </ul>
            <div>
                <a class="btn" href="https://komodor.com/?utm_campaign=Helm-Dash&utm_source=helm-dash"><img
                        src="static/komodor-logo.svg" alt="komodor.io"
                        style="height: 1.2rem; vertical-align: text-bottom; filter: grayscale(00%);"></a>
            </div>
            <div class="separator-vertical"><span></span></div>
            <i class="btn bi-power text-muted p-2 m-1 mx-2" title="Shut down the Helm Dashboard application"></i>
        </div>
    </nav>
    <!-- /TOP BAR -->

    <!--REPO SECTION-->
    <div class="row mt-3 pt-3 me-5 section" id="sectionRepo" style="display: none">
        <div class="col-3 ps-4 repo-list">
            <div class="p-2 bg-white rounded-1 b-shadow">
                <h4 class="fs-6">Repositories</h4>
                <ul class="list-unstyled p-2">
                </ul>
                <button class="btn btn-sm border-secondary text-muted">
                    <i class="bi-plus-lg"></i> Add Repository
                </button>
            </div>
        </div>
        <div class="col-9 repo-details bg-white b-shadow pt-4 px-5 overflow-auto rounded">
            <div class="float-end">
                <button class="me-2 btn btn-sm btn-light bg-white border border-secondary btn-update">
                    <i class="bi-arrow-repeat"></i> Update
                </button>
                <button class="btn btn-sm btn-light bg-white border border-secondary btn-remove">
                    <i class="bi-trash3"></i> Remove
                </button>
                <p class="my-3"><input class="form-control form-control-sm" type="text" placeholder="Filter..."
                                       id="inputSearch"></p>
            </div>
            <div><span class="text-muted small fw-bold me-3">REPOSITORY</span></div>
            <h2 class="mb-3">name-of-repo</h2>
            <div class="mb-5">
                <span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">URL: <span class="url fw-bold">http://somerepo/somepath</span></span>
            </div>
            <div class="py-2 mb-3 float-end">

            </div>
            <div class="row bg-secondary rounded px-3 py-2 mb-3 fw-bold small"
                 style="text-transform: uppercase">
                <div class="col-3">Chart Name</div>
                <div class="col">Description</div>
                <div class="col-1">Version</div>
                <div class="col-1"></div>
            </div>
            <ul class="list-unstyled mt-4 charts"></ul>
        </div>
    </div>

    <div class="row mt-3 pt-3 me-5 section" id="sectionList" style="display: none">
        <div class="col-2 ms-3">
            <!-- FILTER BLOCK -->
            <div class="p-2 ps-2 bg-white rounded-1 b-shadow" id="filters">
                <form>
                    <h4>Clusters</h4>
                    <ul class="list-unstyled" id="cluster">
                    </ul>

                    <h4 id="limitNamespace" class="display-none">Forced Namespace: <span></span></h4>
                    <!-- TODO
                    <h4 class="mt-4">Namespaces</h4>
                    <ul class="list-unstyled" id="namespaces">
                    </ul>
                    -->
                </form>
            </div>
            <!-- /FILTER BLOCK -->

        </div>

        <!-- INSTALLED LIST -->
        <div class="col ms-2" id="installedList">
            <div class="col rounded rounded-1 b-shadow header">
                <div class="bg-white rounded-top m-0">
                    <h2 class="m-0 p-1"><img class="m-2 mx-3 me-2" src="static/helm-gray.svg" alt="Installed Charts">Installed
                        Charts (<span></span>)</h2>
                </div>
                <div class="bg-secondary rounded-bottom m-0 row p-2">
                    <div class="col-4 hdr-name">Name</div>
                    <div class="col-3">Chart Status</div>
                    <div class="col-2">Chart</div>
                    <div class="col-1">Revision</div>
                    <div class="col-1">Namespace</div>
                    <div class="col-1">Updated</div>
                </div>
            </div>

            <div class="body"></div>
            <div class="bg-white rounded shadow p-3 display-none no-charts">Looks like you don't have any charts
                installed. "Repository" section may be a good place to start.
            </div>
        </div>
        <!-- /INSTALLED LIST -->
    </div>

    <div class="row flex-nowrap pt-0 mx-0 section" id="sectionDetails" style="display: none">
        <div class="col-2 px-4 py-4 pe-3 rev-list">
            <h3 class="fw-bold small">Revisions</h3>
            <ul class="list-unstyled">
            </ul>
        </div>

        <div class="col-10 rev-details bg-white b-shadow pt-4 px-5 overflow-auto">
            <div><span class="rev-status fw-bold me-3"></span></div>
            <div>
                <h1 class="name float-start">Name</h1>
                <div id="actionButtons" class="float-end">
                    <span><button id="btnUpgrade"
                                  class="opacity-10 btn btn-sm btn-light bg-white me-2 border-secondary">
                        <i class="icon bi-hourglass-split"></i> <span></span>
                    </button></span>

                    <button id="btnRollback" class="btn btn-sm  btn-light bg-white border border-secondary me-2"
                            title="Rollback to this revision"><i class="bi-arrow-repeat"></i> <span>Rollback</span>
                    </button>
                    <button id="btnUninstall" class="btn btn-sm btn-light bg-white  border border-secondary"
                            title="Uninstall the chart"><i class="bi-trash3"></i> Uninstall
                    </button>
                    <br/>
                    <a class="link small" id="btnUpgradeCheck">
                        <span class="spinner-border spinner-border-sm" style="display: none" role="status"
                              aria-hidden="true"></span>
                    </a>
                    <a class="link small" id="btnAddRepository">
                        <span class="spinner-border spinner-border-sm" style="display: none" role="status"
                              aria-hidden="true"></span>
                    </a>
                </div>
                <div class="fs-2">&nbsp;</div>
            </div>

            <div>
                Revision <span class="rev fw-bold me-4"></span>
                <span class="rev-date"></span>
            </div>

            <div class="rev-tags mt-3">
                <span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">chart version: <span
                        class="rev-chart  fw-bold"></span></span>
                <span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">app version: <span
                        class="rev-app fw-bold"></span></span>
                <span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">namespace: <span
                        class="rev-ns fw-bold"></span></span>
                <span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">cluster: <span
                        class="rev-cluster fw-bold"></span></span>
            </div>

            <div id="revDescr" class="mt-3 mb-4"></div>

            <nav class="mt-2">
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-resources" data-tab="resources"
                            type="button" role="tab" aria-controls="nav-resources" aria-selected="false" tabindex="-1">
                        Resources
                    </button>
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-manifest" data-tab="manifests"
                            type="button" role="tab" aria-controls="nav-manifest" aria-selected="false"
                            tabindex="-1">Manifests
                    </button>
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-manifest" data-tab="values"
                            type="button" role="tab" aria-controls="nav-manifest" aria-selected="false" tabindex="-1">
                        Values
                    </button>
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-manifest" data-tab="notes"
                            type="button" role="tab" aria-controls="nav-manifest" aria-selected="false" tabindex="-1">
                        Notes
                    </button>
                </div>
            </nav>
            <div class="tab-content">
                <div class="tab-pane p-3 container-fluid" id="nav-resources" role="tabpanel">
                    <div class="row bg-secondary rounded px-3 py-2 mb-3 fw-bold small"
                         style="text-transform: uppercase">
                        <div class="col-2">Resource Type</div>
                        <div class="col-3">Name</div>
                        <div class="col-1">Status</div>
                        <div class="col-5">Status Message</div>
                        <div class="col-1"></div>
                    </div>
                    <div class="body"></div>
                </div>
                <div class="tab-pane" id="nav-manifest" role="tabpanel">
                    <nav class="navbar bg-white rounded border border-secondary">
                        <form class="container-fluid" id="modePanel">
                            <label class="form-check-label" for="diffModeNone">
                                <input class="form-check-input" type="radio" name="diffMode" id="diffModeNone"
                                       data-mode="view">
                                View
                            </label>
                            <label class="form-check-label" for="diffModePrev">
                                <input class="form-check-input" type="radio" name="diffMode" id="diffModePrev"
                                       data-mode="diff-prev">
                                Diff with previous
                            </label>
                            <label class="form-check-label" for="diffModeRev">
                                <input class="form-check-input" type="radio" name="diffMode" id="diffModeRev"
                                       data-mode="diff-rev">
                                Diff with specific revision: <input class="form-input" size="3" id="specRev">
                            </label>
                            <label class="form-check-label" for="userDefinedVals">
                                <input class="form-check-input" type="checkbox" id="userDefinedVals"> User-defined only
                            </label>
                        </form>
                    </nav>

                    <div id="manifestText" class="mt-2 bg-white"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Modals -->
<div id="errorAlert" style="z-index: 2000; max-width: 95%; overflow: auto"
     class="display-none alert alert-sm alert-danger alert-dismissible position-absolute position-absolute top-0 start-50 translate-middle-x mt-3 border-danger"
     role="alert">
    <h4 class="alert-heading"><i class="bi-exclamation-triangle-fill"></i> <span></span></h4>
    <hr>
    <p style="white-space: pre-wrap"></p>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<div class="offcanvas offcanvas-end rounded-start" tabindex="-1" id="describeModal"
     aria-labelledby="describeModalLabel" style="overflow-x: auto">
    <div class="offcanvas-header border-bottom p-4">
        <div>
            <h5 id="describeModalLabel"></h5>
            <p class="m-0 mt-4">ResourceType</p>
        </div>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>

    </div>
    <div class="offcanvas-body p-2 ps-4" id="describeModalBody">
    </div>
</div>


<div class="modal" id="confirmModal" tabindex="-1" aria-labelledby="describeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog modal-dialog-scrollable modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmModalLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="confirmModalBody">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-confirm">Confirm</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="repoAddModal" tabindex="-1">
    <div class="modal-dialog modal-dialog modal-dialog-scrollable modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Chart Repository</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form enctype="application/x-www-form-urlencoded">
                    <label class="form-label">Name: <input class="form-control" name="name"></label>
                    <label class="form-label">URL: <input class="form-control" name="url"></label>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-confirm">Add Repository</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="upgradeModal" tabindex="-1">
    <div class="modal-dialog modal-dialog modal-dialog-scrollable modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="upgradeModalLabel">
                    <span class="type"></span> <b class='text-success name'></b>
                </h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form class="modal-body border-bottom fs-5" enctype="multipart/form-data">
                <div class="input-group mb-3 text-muted">
                    <label class="form-label me-4 text-dark">Version to install: <select
                            class='fw-bold text-success ver-new'></select></label> <span class="ver-old">(current version is <span
                        class='text-success ms-1'>0.0.0</span>)</span>
                </div>
                <div class="input-group mb-3 text-muted">
                    <label class="form-label me-4 text-dark">
                        Release Name: <input class="form-control rel-name">
                    </label>
                    <label class="form-label me-4 text-dark">
                        Namespace (optional):
                        <input type="text" class="form-control rel-ns" list="ns-datalist"/>
                        <datalist id="ns-datalist"></datalist>
                    </label>
                    <label class="form-label me-4 text-dark">
                        Cluster: <span class="form-label rel-cluster"></span>
                    </label>
                </div>
                <div class="row">
                    <div class="col-6 pe-3">
                        <label class="form-label">User-Defined Values:</label>
                    </div>
                    <div class="col-6 ps-3">
                        <label class="form-label">Chart Values Reference:</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6 pe-3">
                        <textarea name="values" class="form-control w-100 h-100" rows="5"
                                  style="font-family: monospace"></textarea>
                    </div>
                    <div class="col-6 ps-3">
                        <pre class="ref-vals fs-6 w-100 bg-secondary p-2 rounded" style="max-height: 20rem"></pre>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6 pe-3">
                        <span class="invalid-feedback small mb-3"> (wrong YAML)</span>
                    </div>
                </div>
                <label class="form-label mt-4">Manifest changes:</label>
                <div id="upgradeModalBody" class="small"></div>
            </form>
            <div class="modal-footer d-flex">
                <button type="button" class="btn btn-scan bg-white border-secondary display-none">Scan for Problems
                </button>
                <button type="button" class="btn btn-primary btn-confirm">Confirm</button>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
        crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"
        integrity="sha512-gU7kztaQEl7SHJyraPfZLQCNnrKdaQi5ndOyt4L4UPL/FHDd/uB9Je6KDARIqwnNNE27hnqoWLBq+Kpe4iHfeQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@3.0.3/build/global/luxon.min.js"
        integrity="sha256-RH4TKnKcKyde0s2jc5BW3pXZl/5annY3fcZI9VrV5WQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"
        integrity="sha512-CSBhVREyzHAjAFfBlIBakjoRUKp5h7VSweP0InR/pAJyptH7peuhCsqAI/snV+TwZmXZqoUklpXp6R6wMnYf5Q=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="static/repo.js"></script>
<script src="static/list-view.js"></script>
<script src="static/revisions-view.js"></script>
<script src="static/details-view.js"></script>
<script src="static/actions.js"></script>
<script src="static/scripts.js"></script>

</body>
</html>